<template>
    <div ref="echar" class="echarts"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import _ from 'lodash'
import Vue from 'vue'
// 写成组件之后的状态，许多事件需要传出去
// enumerating ECharts events for now
// 这里是echarts的常用events事件
const ACTION_EVENTS = [
  'legendselectchanged',
  'legendselected',
  'legendunselected',
  'datazoom',
  'datarangeselected',
  'timelinechanged',
  'timelineplaychanged',
  'restore',
  'dataviewchanged',
  'magictypechanged',
  'geoselectchanged',
  'geoselected',
  'geounselected',
  'pieselectchanged',
  'pieselected',
  'pieunselected',
  'mapselectchanged',
  'mapselected',
  'mapunselected',
  'axisareaselected',
  'brush',
  'brushselected'
]
// 常用鼠标事件
const MOUSE_EVENTS = [
  'click',
  'dblclick',
  'mouseover',
  'mouseout',
  'mousemove',
  'mousedown',
  'mouseup',
  'globalout'
]

export default {
  props: {
    options: Object,
    theme: String,
    initOptions: Object,
    group: String,
    autoResize: Boolean
  },
  data () {
    return {
      // 初始化之后的echarts实例,即是init方法之后的对象
      chart: null
    }
  },
  watch: {
    options: {
      // 这里的handler只是一个函数名称
      handler (options) {
        if (!this.chart && options) {
          this.init1()
        } else {
          this.chart.setOption(this.options, true)
        }
      },
      // 深层监听，对象内部的东西的变化
      deep: true
    },
    group: {
      handler (group) {
        this.chart.group = group
      }
    }
  },
  computed: {
    width: {
      cache: false,
      get () {
        return this.chart.getWidth()
      }
    },
    height: {
      cache: false,
      get () {
        return this.chart.getHeight()
      }
    },
    //  isDisposed实例是否被销毁
    isDisposed: {
      cache: false,
      get () {
        return this.chart.isDisposed()
      }
    }
  },
  created () {

  },
  mounted () {
    // console.log(this.$el)
    if (this.options) {
      this.init1()
    }
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }
    this.dispose()
  },
  methods: {
    _instanceMethod (name, ...args) {
      if (!this.chart) {
        Vue.util.warn(`Cannot call [${name}] before the chart is initialized. Set prop [options] first.`, this)
        return
      }
      return this.chart[name](...args)
    },
    // 实例,的API设置,只在当前my-chart组件内使用的方法
    mergeOptions (options) {
      this._instanceMethod('setOption', options)
    },
    resize (options) {
      this._instanceMethod('resize', options)
    },
    dispatchAction (playload) {
      this._instanceMethod('dispatchAction', playload)
    },
    convertToPixel (finder, value) {
      this._instanceMethod('convertToPixel', finder, value)
    },
    convertFromPixel (finder, value) {
      this._instanceMethod('convertFromPixel', finder, value)
    },
    containPixel (finder, value) {
      this._instanceMethod('containPixel', finder, value)
    },
    showLoading (type, options) {
      this._instanceMethod()
    },
    hideLoading () {
      this._instanceMethod('hideLoading')
    },
    getDataURL (options) {
      return this._instanceMethod('getDataURL', options)
    },
    getConnectedDataURL (options) {
      return this._instanceMethod('getConnectedDataURL', options)
    },
    clear () {
      this._instanceMethod('clear')
    },
    dispose () {
      this._instanceMethod('dispose')
    },

    init1 () {
      if (this.chart) {
        return
      }
      // console.log(this.$el)
      // console.log(this.$refs.echar)
      let myChart = echarts.init(this.$el, this.theme, this.initOptions)

      myChart.setOption(this.options)
      // 传递事件出去
      ACTION_EVENTS.forEach(event => {
        myChart.on(event, params => {
          this.$emit(event, params)
        })
      })
      // 因为这是一个canvas,图表里面的点击事件需要在上面获取
      MOUSE_EVENTS.forEach(event => {
        myChart.on(event, params => {
          this.$emit(event, params)
        })
      })

      if (this.autoResize) {
      // leading：true:超时前沿调用  false: 超时后沿调用
        this.__resizeHandler = _.debounce(() => {
          myChart.resize()
        }, 100, {leading: true})
        window.addEventListener('resize', this.__resizeHandler)
      }

      this.chart = myChart
    }
  }
}
</script>

<style>
.echarts{
  height: 400px;
  width: 400px;
}
</style>

